import React from 'react';
import { Avatar, Menu, Spin, Icon, Dropdown, Row } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { connect } from 'dva';
import router from 'umi/router';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';

class AvatarDropdown extends React.Component {
  onMenuClick = event => {
    const { key } = event;
    console.log('click==>>', key);
    return;
    if (key === 'logout') {
      const { dispatch } = this.props;
      if (dispatch) {
        dispatch({
          type: 'login/logout',
        });
      }
      return;
    }
    router.push(`/account/${key}`);
  };

  render() {
    const { currentUser = {}, menu } = this.props;
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        <Menu.Item key="userInfo">
          <Row>
            <Icon type="user" style={{ marginRight: '10px' }} />
            <span>基本信息</span>
          </Row>
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="logout">
          <Row>
            <Icon type="logout" style={{ marginRight: '10px' }} />
            <span>退出登录</span>
          </Row>
        </Menu.Item>
      </Menu>
    );

    return currentUser && currentUser.name ? (
      <Dropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar
            size="small"
            className={styles.avatar}
            src="http://img5.imgtn.bdimg.com/it/u=3237565597,3483832202&fm=26&gp=0.jpg"
            alt="avatar"
          />
          <span className={styles.name}>雨诺协同云轻应用</span>
        </span>
      </Dropdown>
    ) : (
      <Spin
        size="small"
        style={{
          marginLeft: 8,
          marginRight: 8,
        }}
      />
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(AvatarDropdown);
